import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Form, Input, Modal} from 'antd';
import {PageContent, FormItemLayout} from 'zk-tookit/antd';

export class <%= capitalName %>Edit extends Component {
    state = {
        loading: false,
    };

    static propTypes = {
        isAdd: PropTypes.bool,
        isUpdate: PropTypes.bool,
        data: PropTypes.object.isRequired,
        onSubmit: PropTypes.func.isRequired,
    };

    componentWillReceiveProps(nextProps) {
        const {visible} = nextProps;
        if (!visible) {
            this.handleReset();
        }
    }

    handleReset = () => {
        this.props.form.resetFields();
    };

    render() {
        const {form: {getFieldDecorator}, data = {}, isUpdate} = this.props;
        const {loading} = this.state;
        const labelSpaceCount = 3;

        return (
            <PageContent>
                <Form onSubmit={this.handleSubmit}>
                    {isUpdate ? getFieldDecorator('id', {initialValue: data.id})(<Input type="hidden"/>) : null}
<% for (let i = 0;i<fields.length;i++){%>
                    <FormItemLayout
                        label="<%= fields[i].title%>"
                        labelSpaceCount={labelSpaceCount}
                        width={300}
                    >
                        {getFieldDecorator('<%= fields[i].dataIndex%>', {
                            initialValue: data.<%= fields[i].dataIndex%>,
                            rules: [
                                {required: true, message: '请输入<%= fields[i].title%>！'},
                            ],
                        })(
                            <Input placeholder="请输入<%= fields[i].title%>"/>
                        )}
                    </FormItemLayout>
<%}%>
                </Form>
            </PageContent>
        );
    }
}


@Form.create()
export default class <%= capitalName %>EditModal extends Component {
    static defaultProps = {
        visible: false,
        onOk: () => true,
        onCancel: () => true,

        data: {},
        isAdd: true,
        isUpdate: false,
    };

    static propTypes = {
        title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
        visible: PropTypes.bool,
        onOk: PropTypes.func,
        onCancel: PropTypes.func,

        data: PropTypes.object,
        isAdd: PropTypes.bool,
        isUpdate: PropTypes.bool,
    };

    state = {
        loading: false,
    };

    handleCancel = () => {
        this.props.onCancel();
    };

    handleOk = (values) => {
        e.preventDefault();
        const {loading} = this.state;
        const {form, onSubmit} = this.props;

        if (loading) return;

        form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                this.props.onOk(values);
            }
        });
    };

    render() {
        const {
            title,
            visible,
            data,
            isAdd,
            isUpdate,
        } = this.props;
        let modalTitle = title;
        if (!title) {
            modalTitle = isUpdate ? '修改<%= chineseName%>' : '添加<%= chineseName%>';
        }
        return (
            <Modal
                width={400}
                title={modalTitle}
                visible={visible}
                maskClosable={false}
                onCancel={this.handleCancel}
                onOk={this.handleOk}
            >
                <<%= capitalName %>Edit
                    form={this.props.form}
                    visible={visible}
                    data={data}
                    isAdd={isAdd}
                    isUpdate={isUpdate}
                />
            </Modal>
        );
    }
}

